<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path:'/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>音乐管理</el-breadcrumb-item>
      <el-breadcrumb-item>音乐列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20">
      <el-col :span='21'>
        <el-input v-model="query.keyword"
                  placeholder="请输入歌名或歌手名"
                  size="default"
                  autocomplete="off"
                  clearable
                  @input="selectAllMusic">
          <template #prefix>
            <el-icon><Search/></el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span='3'>
        <el-button type="primary" @click='addMusic'>添加音乐</el-button>
      </el-col>
    </el-row>
    <!--表格数据-->
    <el-table :data="musicData.music" border style="width: 100%" stripe>
      <el-table-column label="序列" type="index" width="80"></el-table-column>
      <el-table-column prop="songName" label="歌名"/>
      <el-table-column prop="singer" label="歌手"/>
      <el-table-column prop="totalTime" label="时长" width="80"/>
      <el-table-column prop="songType" label="类型" width="100">
        <template v-slot:='scope'>
          <el-tag type="success" v-if="scope.row.songType===1">音乐</el-tag>
          <el-tag type="warning" v-else>纯音乐</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template v-slot:="scope">
          <el-button type="primary" :icon="Edit" size='small'  @click="editMusic(scope.row.id)">编辑</el-button>
          <el-button type="danger"  :icon="Delete" size='small'  @click="deleteMusic(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        v-show="isPaginationShow"
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        background
        layout="prev,pager,next,total,sizes,jumper"
        v-model:current-page="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10,15,20,25]"
        :total="musicData.total">
    </el-pagination>
  </el-card>
</template>

<script setup>
import {Edit,Delete} from "@element-plus/icons-vue"
import {getCurrentInstance,onMounted, reactive, ref,computed} from "vue";
import axios from "axios";
import router from "@/router/index.js";
const msg = getCurrentInstance().appContext.config.globalProperties.$message
const confirm=getCurrentInstance().appContext.config.globalProperties.$confirm


//分页组件是否显示
const isPaginationShow=computed(()=>{
  return musicData.value.total > 0;
});

//查询的数据信息
let query=reactive({
  keyword:"",
  currentPage:1,
  pageSize:10
})

//查询的音乐结果
let musicData=ref({
  music:[],
  total:0
})

//查询所有的音乐信息
function selectAllMusic(){
  const options = {
    //获取用户信息和权限信息
    url: '/music/selectAllMusic',
    params:{
      keyword: query.keyword,
      currentPage:query.currentPage,
      pageSize:query.pageSize
    },
    method: 'GET',
    headers: {'Content-Type': 'application/json'}
  };

  axios(options).then(res => {
    let mg = res.data;
    if (mg.meta.code === 200) {
      //musicData-----写到这里了
      musicData.value=mg.data;
    } else {
      msg.error(mg.meta.msg);
    }
  }).catch(err => {
    //网络异常啥的
    msg.error(err);
  })
}

//每页数据条数改变时执行
function handlePageSizeChange(){
  selectAllMusic();
}

//当前页码改变时执行
function handleCurrentPageChange(){
  selectAllMusic();
}

//挂在之后执行
onMounted(()=>{
  selectAllMusic();
})

//跳转到添加音乐页面
function addMusic(){
  router.push("/addMusic")
}

//跳转到编辑页面，穿参数id
function editMusic(id){
  router.push({
    path:"/editMusic",
    state:{
      id:id
    }
  })
}

//删除音乐
async function deleteMusic(id){
  //弹框询问用户是否删除
  const confirmResult = await confirm('此操作将永久删除该角色, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(err => err);
  // 如果用户确认删除，则返回字符串confirm
  // 如果用户取消了删除，则返回字符串cancel
  if (confirmResult !== 'confirm') {
    return msg.info('取消删除！');
  }

  axios.delete("/music/deleteMusic/"+id).then(res => {
    let mg = res.data;
    if (mg.meta.code === 200) {
        selectAllMusic();
        msg.success(mg.meta.msg);
    }
  }).catch(err =>{
    msg.error(err);
  })
}

</script>

<style scoped>
.el-row{
  margin: 20px 0;
}
.el-input{
  --el-input-width: 300px;
}
.el-pagination{
  margin:30px 0 0 0;
  justify-content: center;
}
</style>
